<template>
  <div class="section sub-margin">
    <div class="sub-page-title sub-page-return">
      <el-button size="small" icon="el-icon-arrow-left" @click.stop="goBack">返回</el-button>
      民主测评
    </div>
    <div class="main_info">
      <el-col :span="18" class="left">
        <div class="select_li">
          <div class="select_lable">关键词</div>
          <div class="select_con">
            <el-input
              size="small"
              clearable
              v-model="selectParams.key"
              @keyup.enter.native="onSearch"
              placeholder="请输入"></el-input>
          </div>
        </div>
        <div class="commit">
          <el-button class="btnBg" size="small" type="primary" @click="onSearch" icon="el-icon-search">搜索</el-button>
        </div>
      </el-col>
      <el-col :span="6" class="right">
        <el-button class="btnBg" size="small" type="primary" icon="el-icon-upload2" @click="onImportData()">
          导入
        </el-button>
        <el-button class="btnBg" size="small" type="primary" icon="el-icon-edit" @click="onAddEditSee()">
          添加
        </el-button>
      </el-col>
    </div>
    <div class="main_con">
      <vxe-table
        class="mytable-scrollbar"
        border
        stripe
        height="100%"
        row-id="id"
        size="medium"
        resizable
        :loading="loading2"
        :scroll-y="{ enabled: false }"
        :data="tableData"
        :header-cell-class-name="headerStyle"
        :row-class-name="rowClass"
        highlight-hover-row>
        <vxe-column type="seq" title="序号" width="70" align="center" fixed="left"></vxe-column>
        <vxe-column field="userName" title="人员" align="center" min-width="200" fixed="left"></vxe-column>
        <vxe-column field="telephone" title="手机号" min-width="200" align="center"></vxe-column>
        <vxe-column field="userOrgName" title="单位名称" min-width="200" align="center"></vxe-column>
        <!-- <vxe-column field="releaseTime" title="创建时间" width="180" align="center"></vxe-column> -->
        <vxe-column field="rate" title="操作" width="110" align="center" fixed="right">
          <template #default="{ row }">
            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
              <el-button class="btnText" type="text" @click="onAddEditSee(row)" icon="el-icon-edit"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <el-button class="btnText" type="text" icon="el-icon-delete" @click="onDel(row)"></el-button>
            </el-tooltip>
          </template>
        </vxe-column>
      </vxe-table>
      <el-pagination
        background
        :loading="loading2"
        :current-page="tablePage.pageNum"
        :page-sizes="[10, 20, 50]"
        :page-size="tablePage.pageSize"
        :total="tablePage.totalSize"
        @current-change="onPageChange"
        hide-on-single-page
        layout="pager,total"></el-pagination>
    </div>
    <!-- 添加/编辑 开始-->
    <XnDialog
      :title="item.id ? '编辑' : '添加'"
      :visible.sync="peopleAddEditShow"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="35%"
      append-to-body
      class="branch_dialog"
      @close="peopleAddEditShow = false">
      <PeopleAddEdit
        :item="item"
        @handleCancel="handleCancelDialog"
        @handleSuccess="handleSuccessDialog"></PeopleAddEdit>
    </XnDialog>
    <!-- 添加/编辑 结束-->
    <!-- 添加/编辑 开始-->
    <XnDialog
      title="导入人员名单"
      :visible.sync="peopleImportShow"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="35%"
      append-to-body
      class="branch_dialog"
      @close="handleCancelDialog">
      <PeopleImport
        :dialogVisible.sync="peopleImportShow"
        @handleCancel="handleCancelDialog"
        @handleSuccess="handleSuccess"></PeopleImport>
    </XnDialog>
    <!-- 添加/编辑 结束-->
    <!-- 提示 start -->
    <XnDialog
      title="提示"
      :visible.sync="dialogConfig.collectShow"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="400px"
      append-to-body
      class="collect_dialog"
      @close="dialogConfig.collectShow = false">
      <template>
        <div>
          <i class="color_warning_dia el-icon-warning"></i>
          {{ dialogConfig.msg }}
        </div>
        <div class="bot_tips bot_tips_end">
          <!-- <el-checkbox v-model="checkedCollect">不再提醒</el-checkbox> -->
          <!-- <span class="bot_tips_btn" @click="btnCheck">好的</span> -->
          <el-button
            class="btnBorder"
            type="primary"
            @click="dialogConfig.collectShow = !dialogConfig.collectShow"
            size="small">
            取 消
          </el-button>
          <el-button class="btnBg" type="primary" @click="onDialogBtnCheck(dialogConfig.operType)" size="small">
            确 定
          </el-button>
        </div>
      </template>
    </XnDialog>
    <!-- 提示 end -->
  </div>
</template>

<script>
import { listAssessmentPerson, delAssessmentPerson } from '@apis/mzEvaluation.js'
import PeopleAddEdit from './components/PeopleAddEdit.vue'
import PeopleImport from './components/PeopleImport.vue'
import XnDialog from '@com/xnDialog.vue'
export default {
  name: 'PeopleMain',
  props: {},
  components: { PeopleAddEdit, PeopleImport, XnDialog },
  data() {
    return {
      loading2: false,

      tableData: [],
      tablePage: {
        pageNum: 1,
        pageSize: 20,
        totalSize: 0,
      },
      selectParams: {
        pageNum: 1,
        pageSize: 20,
        key: '',
      },
      peopleImportShow: false,
      peopleAddEditShow: false,
      // 选中勾选的任务
      checkResult: [],
      formInline: {},
      item: {},
      rowData: {},
      dialogConfig: {
        collectShow: false,
        msg: '确定删除？',
        operType: 0,
      },
    }
  },
  computed: {
    exportBtnDisabled() {
      return !(this.checkResult.length > 0)
    },
  },
  created() {
    this.initdata()
  },
  mounted() {},
  methods: {
    /* 初始化数据 */
    initdata() {
      listAssessmentPerson({
        ...this.selectParams,
      }).then(res => {
        const data = res.data
        this.tableData = data.content
        this.tablePage.pageNum = data.pageNum
        this.tablePage.pageSize = data.pageSize
        this.tablePage.totalSize = data.totalSize
      })
    },
    /* 分页切换 */
    onPageChange(e) {
      this.selectParams.pageNum = e.currentPage
      this.initdata()
    },
    /* 状态筛选 */
    onStatusChange(e) {
      this.selectParams.status = e
      this.initdata()
    },
    /* 搜索 */
    onSearch() {
      this.initdata()
    },
    // 导入
    onImportData() {
      this.peopleImportShow = true
    },
    /* 编辑和新建--查看 */
    onAddEditSee(row) {
      this.item = { ...row }
      this.peopleAddEditShow = true
    },
    /* 删除 */
    onDel(row) {
      this.rowData = row
      this.dialogConfig = {
        collectShow: true,
        msg: '确定删除?',
        operType: 0,
      }
    },
    // 提示框点击确定
    onDialogBtnCheck(operType) {
      if (operType === 0) {
        delAssessmentPerson({
          id: this.rowData.id,
        }).then(res => {
          if (res.status === 200) {
            this.dialogConfig.collectShow = false
            this.$message.success(res.message)
            this.initdata()
          }
        })
      }
    },
    /* onDel(row) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delAssessmentPerson({
            id: row.id,
          }).then((res) => {
            if (res.status == 200) {
              this.$message.success(res.message);
              this.initdata();
            }
          });
        })
        .catch(() => {});
    }, */
    // 添加成功
    handleSuccessDialog(data) {
      console.log(data)
      this.peopleAddEditShow = data
      this.initdata()
    },
    // 导入成功
    handleSuccess(data) {
      this.peopleImportShow = data
      this.initdata()
    },
    // 关闭弹出框
    handleCancelDialog(data) {
      this.peopleAddEditShow = data
      this.peopleImportShow = data
      this.initdata()
    },
    // 返回
    goBack() {
      this.$router.go(-1)
    },
    /* 头部样式 */
    headerStyle({ row, column, rowIndex, columnIndex }) {
      return 'headerStyle'
    },
    rowClass({ row, rowIndex }) {
      return 'rowClass'
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@styles/layout.scss';
.section {
  height: 100%;
  background-color: #fff;

  .main_info {
    display: flex;
    align-items: center;
    height: 60px;

    .left {
      height: 100%;
      display: flex;
      align-items: center;

      .select_li {
        display: flex;
        align-items: center;
        margin-right: 40px;

        .select_lable {
          color: #343434;
          font-size: 14px;
          font-weight: bold;
          margin-right: 10px;
        }

        .select_con {
          display: flex;
          align-items: center;

          /deep/ .el-select-dropdown__item {
            padding: 0 20px;
          }
        }
      }

      .commit {
        display: flex;
        float: right;
      }
    }

    .right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }

  .main_con {
    height: calc(100% - 180px);

    .mytable-scrollbar {
      height: 100%;
    }

    /deep/.headerStyle {
      // background: linear-gradient(0deg, #c2d2e7 0%, #e0e8f4 100%);
      color: #333;
      border-left: 1px solid #eee;

      // div {
      //   font-size: 15px;
      // }
    }

    /deep/.rowClass {
      div,
      i {
        font-size: 14px;
      }
      .ing {
        color: #1852a3;
      }

      .over {
        color: #2d941b;
      }
      .top {
        color: #950002;
      }
    }
  }
  .vxe-pager.size--medium {
    height: 50px;
  }

  /*滚动条整体部分*/
  .mytable-scrollbar ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  /*滚动条的轨道*/
  .mytable-scrollbar ::-webkit-scrollbar-track {
    background-color: #ffffff;
  }

  /*滚动条里面的小方块，能向上向下移动*/
  .mytable-scrollbar ::-webkit-scrollbar-thumb {
    background-color: #bfbfbf;
    border-radius: 5px;
    border: 1px solid #f1f1f1;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  }

  .mytable-scrollbar ::-webkit-scrollbar-thumb:hover {
    background-color: #a8a8a8;
  }

  .mytable-scrollbar ::-webkit-scrollbar-thumb:active {
    background-color: #787878;
  }

  /*边角，即两个滚动条的交汇处*/
  .mytable-scrollbar ::-webkit-scrollbar-corner {
    background-color: #ffffff;
  }
}
.branch_dialog {
  /deep/.el-dialog__body {
    min-height: 0;
  }
}
</style>
